<template>
    <view>
        <navigationBar :bgType="3" backType="1" navigationTitle="商家入驻" />
        <view class="app" :style="'padding-top:calc(' + navigationHeight + 'px + 45px);'">
            <input type="text" />
            <view class="form-item">
                <text class="required">*</text>
                <text class="label">姓名</text>
                <input type="text" placeholder="请输入用户名" v-model="form.name" />
            </view>
            <view class="form-item">
                <text class="required">*</text>
                <text class="label">身份证号</text>
                <input type="bumber" placeholder="请输入身份证号" v-model="form.number" />
            </view>
            <view class="form-item">
                <text class="required">*</text>
                <text class="label">手机号</text>
                <input type="number" placeholder="请输入手机号" v-model="form.phone" />
            </view>
            <view class="form-item">
                <text class="required">*</text>
                <text class="label">商家名称</text>
                <input type="text" placeholder="填写商家名称" v-model="form.admin" />
            </view>
            <view class="form-item">
                <view style="display: flex; align-items: center; width: 100%">
                    <text class="required">*</text>
                    <text class="label">商品核销地址</text>
                    <input
                        v-if="!form.address"
                        disabled
                        @click="chooseAddress"
                        type="text"
                        placeholder="请选择商品核销地址"
                        v-model="form.address"
                    />
                </view>
                <view v-if="form.address" @click="chooseAddress" style="line-height: 1.2rem">
                    {{ form.address }}
                </view>
            </view>

            <view class="form-item2">
                <view class="">
                    <text class="required">*</text>
                    <text class="label">营业执照</text>
                </view>
                <view class="up-img1">
                    <!-- <u-upload :action="action1" ref="uUploaad"></u-upload> -->
                    <view class="image" v-if="zhizhaoPic">
                        <!-- <image
                            v-if="zhizhaoPic"
                            :src="BaseUrl + zhizhaoPic"
                            mode="scaleToFill"
                            @click="upImg_zhizhao"
                        /> -->
                        <u-icon
                            name="close-circle-fill"
                            @click="removeImg_zhizhao"
                            size="48"
                            class="closeIcon"
                        ></u-icon>
                    </view>
                    <view class="card" @click="upImg_zhizhao" v-else>
                        <u-icon class="addIcon" name="plus"></u-icon>
                    </view>
                </view>
            </view>
            <view class="form-item2">
                <view class="">
                    <text class="required">*</text>
                    <text class="label">商户/品牌头像</text>
                </view>
                <view class="up-img1">
                    <!-- <u-upload :action="action1" ref="uUploaad"></u-upload> -->
                    <view class="image" v-if="touxiangPic">
                        <!-- <image
                            v-if="touxiangPic"
                            :src="BaseUrl + touxiangPic"
                            mode="scaleToFill"
                            @click="upImg_touxiang"
                        /> -->
                        <u-icon
                            name="close-circle-fill"
                            @click="removeImg_touxiang"
                            size="48"
                            class="closeIcon"
                        ></u-icon>
                    </view>
                    <view class="card" @click="upImg_touxiang" v-else>
                        <u-icon class="addIcon" name="plus"></u-icon>
                    </view>
                </view>
            </view>
            <view class="form-item3">
                <view class="xinxi">
                    其他证件（根据店铺类型上传，例如：法人身份证食 品经营许可证，卫生许可证等其他证件)
                </view>
                <!-- <u-upload :action="action2" ref="uUploaad"></u-upload> -->
                <view style="display: flex; flex-wrap: wrap">
                    <view class="image" v-for="(item, index) in detailsPic" :key="index">
                        <!-- <image
                            :src="BaseUrl + item"
                            @click="upLoadZhengJian(index)"
                            mode="scaleToFill"
                        /> -->
                    </view>
                    <view class="card" @click="upLoadZhengJian(null)">
                        <u-icon class="addIcon" name="plus"></u-icon>
                    </view>
                </view>
            </view>
            <view class="shenqing">
                <label class="radio">
                    <radio style="margin-right: 10rpx" value="r1" @click.stop="change" :checked="isCheck" />确认同意
                    <text class="xieyi" @click.stop="goXieYi"> &laquo;商家入驻协议&raquo; </text>
                </label>
                <button class="btn" @click="submit">申请成为商家</button>
            </view>
        </view>
    </view>
</template>

<script>
// import { BaseUrl } from "../../utils/req.js";
export default {
    data() {
        return {
            // BaseUrl: BaseUrl,
            form: {
                name: "",
                number: "",
                phone: "",
                admin: "",
                address: "",
                longitude: "",
                latitude: "",
            },
            zhizhaoPic: "",
            touxiangPic: "",
            detailsPic: [],
            navigationHeight: uni.getSystemInfoSync()["statusBarHeight"],
            isCheck: false,
            // 演示地址
            action1: "http://www.example.com/upload",
            action2: "http://www.example.com/upload",
        };
    },
    methods: {
        chooseAddress() {
            this.shoudong = false;
            uni.showLoading({
                title: "加载中",
                mask: true, // 遮罩层
            });
            uni.authorize({
                scope: "scope.userLocation",
                success: (result) => {
                    if (result.errMsg == "authorize:ok") {
                        uni.getLocation({
                            success: (position) => {
                                uni.chooseLocation({
                                    success: (data) => {
                                        console.log(data, "地址");
                                        uni.hideLoading();
                                        this.city = data.address + data.name;
                                        this.form.address = this.city;
                                        this.longitude = data.longitude;
                                        this.latitude = data.latitude;
                                    },
                                    fail(err) {
                                        uni.hideLoading();
                                        console.log(err);
                                    },
                                });
                            },
                            fail(err) {
                                uni.hideLoading();
                                console.log(err);
                            },
                        });
                    } else {
                        uni.hideLoading();
                        console.log("拒绝授权");
                    }
                },
                fail: (error) => {
                    console.log(error);
                    uni.hideLoading();
                },
            });
        },
        goXieYi() {
            uni.navigateTo({
                url: "/user/pages/protocol",
            });
        },
        // 同意协议
        change(e) {
            this.isCheck = !this.isCheck;
            console.log(this.isCheck, "同意协议");
        },
        // 上传营业执照
        upImg_zhizhao() {
            uni.chooseImage({
                count: 1,
                success: async (res) => {
                    // 获取文件流
                    console.log(res);
                    const tempFilePaths = res.tempFilePaths;
                    await uni.uploadFile({
                        // url: BaseUrl + "/api/common/upload",
                        filePath: tempFilePaths[0],
                        name: "file",
                        header: {
                            token: uni.getStorageSync("token"),
                            "content-type": "multipart/form-data",
                        },
                        success: (res) => {
                            this.zhizhaoPic = JSON.parse(res.data).data.url;
                        },
                    });
                },
            });
        },
        upImg_touxiang() {
            uni.chooseImage({
                count: 1,
                success: async (res) => {
                    // 获取文件流
                    console.log(res);
                    const tempFilePaths = res.tempFilePaths;
                    await uni.uploadFile({
                        // url: BaseUrl + "/api/common/upload",
                        filePath: tempFilePaths[0],
                        name: "file",
                        header: {
                            token: uni.getStorageSync("token"),
                            "content-type": "multipart/form-data",
                        },
                        success: (res) => {
                            this.touxiangPic = JSON.parse(res.data).data.url;
                        },
                    });
                },
            });
        },
        upLoadZhengJian(index) {
            uni.chooseImage({
                count: 1,
                success: async (chooseImageRes) => {
                    const tempFilePaths = chooseImageRes.tempFilePaths;
                    await uni.uploadFile({
                        // url: BaseUrl + "/api/common/upload",
                        filePath: tempFilePaths[0],
                        name: "file",
                        header: {
                            token: uni.getStorageSync("token"),
                            "content-type": "multipart/form-data",
                        },
                        success: (res) => {
                            console.log(index != null, "下标");
                            if (index != null) {
                                // this.detailsPic[index] = JSON.parse(res.data).data.url;
                                this.$set(this.detailsPic, index, JSON.parse(res.data).data.url);
                            } else {
                                this.detailsPic.push(JSON.parse(res.data).data.url);
                            }
                        },
                    });
                },
            });
        },
        //删除营业执照图片
        removeImg_zhizhao() {
            this.zhizhaoPic = "";
        },
        //删除商户头像
        removeImg_touxiang() {
            this.touxiangPic = "";
        },
        validateUsername() {
            this.usernameError = !this.username.trim();
        },
        async submit() {
            if (
                this.form.name == "" ||
                this.form.phone == "" ||
                this.form.admin == "" ||
                this.form.admin == "" ||
                this.form.address == ""
            ) {
                uni.showToast({
                    title: "请正确填写商户入驻信息",
                    icon: "none",
                });
                return;
            }
            if (this.zhizhaoPic == "") {
                uni.showToast({
                    title: "请上传营业执照",
                    icon: "none",
                });
                return;
            } else if (this.touxiangPic == "") {
                uni.showToast({
                    title: "请上传商户/品牌头像",
                    icon: "none",
                });
                return;
            } else if (this.detailsPic.length == 0) {
                uni.showToast({
                    title: "请至少上传一张证件照片",
                    icon: "none",
                });
                return;
            } else if (!this.isCheck) {
                uni.showToast({
                    title: "请同意商家入驻协议",
                    icon: "none",
                });
                return;
            }
            let zimg = this.detailsPic.join(",");
            await this.$request
                .post("api/wanlshop.shop/apply", {
                    name: this.form.name,
                    mobile: this.form.phone,
                    sex: "男",
                    shopname: this.form.admin,
                    image: this.zhizhaoPic,
                    zmImg: zimg,
                    avatar: this.touxiangPic,
                    number: this.form.number,
                    address: this.form.address,
                    longitude: this.longitude,
                    latitude: this.latitude,
                })
                .then((res) => {
                    console.log(res, "res");
                    if (res.code == 1) {
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 800,
                        });
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1000);
                    }
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.app {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0 25rpx;
    box-sizing: border-box;

    .form-item {
        overflow: hidden;
        background-color: #fff;
        border-radius: 16rpx;
        width: 100%;
        min-height: 80rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 20rpx;
    }
    input {
        flex: 1;
        height: 100%;
        padding-inline-start: 10rpx;
        text-align: right;
    }

    .form-item2 {
        overflow: hidden;
        background-color: #fff;
        border-radius: 16rpx;
        width: 100%;
        min-height: 300rpx;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 10rpx;

        .label {
            width: 120rpx;
        }

        .up-img1 {
            width: 250rpx;
        }
    }

    .form-item3 {
        overflow: hidden;
        background-color: #fff;
        border-radius: 16rpx;
        width: 100%;
        min-height: 350rpx;
        height: auto;
        margin-bottom: 220rpx;
        padding: 10rpx;

        .xinxi {
            padding: 10rpx;
            line-height: 50rpx;
        }

        .label {
            width: 120rpx;
        }
    }

    .required {
        color: red;
        padding: 0 10rpx;
    }

    .shenqing {
        overflow: hidden;
        width: 700rpx;
        // position: fixed;
        // bottom: 50rpx;
        // padding: 10rpx;
        text-align: center;
        padding-bottom: 30rpx;

        .radio {
            transform: scale(0.7);
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36rpx;
        }

        .xieyi {
            color: #057748;
            font-size: 40rpx;
        }

        .btn {
            width: 600rpx;
            margin-left: 50rpx;
            margin-top: 10rpx;
            overflow: hidden;
            border-radius: 46rpx;
            background: linear-gradient(90deg, #00a67a, #057748);
        }
    }
}
.card {
    width: 200rpx;
    height: 200rpx;
    background: #f7f7f7;
    margin: 10rpx 12rpx;
    border-radius: 20rpx;
    position: relative;
    .addIcon {
        color: #c9c9c9;
        font-size: 42rpx;
        text-align: center;
        line-height: 200rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
.image {
    width: 200rpx;
    height: 200rpx;
    margin: 10rpx 12rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 20rpx;
    position: relative;
    image {
        width: 100%;
        height: 100%;
    }
    .closeIcon {
        position: absolute;
        top: -14rpx;
        right: -14rpx;
    }
}
</style>
